<template>
  <div class="WorkingSchedule" v-loading="loading">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="RFID编码" class="myform-item">
          <div style="display: flex">
            <el-input
              v-model="form.number"
              placeholder="请输入RFID编码"
              @keyup.enter.native="onSearch"
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="状态" class="myform-item">
          <el-select
            v-model="form.status"
            placeholder="请选择"
            style="margin-right: 20px"
          >
            <el-option label="全部" value=""> </el-option>
            <el-option
              v-for="item in options"
              :key="item.status"
              :label="item.title"
              :value="item.status"
            >
            </el-option>
          </el-select>
          <el-button
            style="margin-right: 20px"
            type="primary"
            size="default"
            @click="onSearch"
            >查询</el-button
          >
        </el-form-item>
      </div>

      <div>
        <el-form-item label="" class="myform-item" style="margin-top: 50px">
          <el-button type="primary" @click="complementVisible = true"
            >补码</el-button
          >
          <el-button type="danger" @click="cancellationdialogVisible = true"
            >作废</el-button
          >
        </el-form-item>
      </div>
    </el-form>
    <div class="datastatistics">
      <div>sku：{{ row.sku_code }}</div>
      <div>未打印：{{ weidayin }}</div>
      <div>已打印：{{ yidanyin }}</div>
      <div>已作废：{{ yizuofei }}</div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 20px"
      border
      @selection-change="handleSelectionChange"
      :close-on-click-modal="false"
    >
      <el-table-column label="流水号" align="center" prop="s_number">
      </el-table-column>
      <el-table-column label="RFID编码" align="center" prop="number">
      </el-table-column>
      <el-table-column label="状态" align="center" prop="status">
        <template slot-scope="{ row }">
          <div
            :style="{
              color:
                row.status == 11 ? 'red' : row.status == 1 ? '#E6A23C' : '',
            }"
          >
            {{
              row.status == 11
                ? "已作废"
                : row.status == 1
                ? "已打印"
                : row.status == 0
                ? "未打印"
                : row.status == 2
                ? "待入库"
                : row.status == 3
                ? "已入库 "
                : row.status == 4
                ? "已出库 "
                : row.status == 15
                ? "销退"
                : ""
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" prop="number">
        <template slot-scope="{ row }">
          <el-button type="text" @click="onLook(row.number)">查看</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="作废"
      :visible.sync="cancellationdialogVisible"
      :close-on-click-modal="false"
      width="30%"
    >
      <div class="cancellationdialogVisible">
        <div>
          <div>成品加工单编码：{{ row.processing_code }}</div>
          <div>SKU编码：{{ row.sku_code }}</div>
          <div>款名：{{ row.type_name }}</div>
        </div>
        <div>
          <div>款号：{{ row.type_no }}</div>
          <div>颜色编码：{{ row.color_code }}</div>
          <div>尺码编码：{{ row.size_code }}</div>
        </div>
        <div>
          <div>流水号：</div>
          <el-input
            v-model="cancellation.strnumber"
            placeholder="请输入起始流水号"
          ></el-input>
          <div></div>
          <el-input
            v-model="cancellation.endnumber"
            placeholder="请输入终止流水号"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancellationdialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="onConfirm()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="生成RFID" :visible.sync="complementVisible" width="30%" :close-on-click-modal="false">
      <div class="cancellationdialogVisible">
        <div>
          <div>成品加工单编码：{{ row.processing_code }}</div>
          <div>SKU编码：{{ row.sku_code }}</div>
          <div>款名：{{ row.type_name }}</div>
        </div>
        <div>
          <div>款号：{{ row.type_no }}</div>
          <div>颜色编码：{{ row.color_code }}</div>
          <div>尺码编码：{{ row.size_code }}</div>
        </div>
        <div>
          <div>可补数量：{{ kebushu }}</div>
        </div>
        <div>
          <div>数量：</div>
          <el-input
            v-model="complement.num"
            type="number"
            placeholder="请输入生成RFID的数量"
          ></el-input>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="complementVisible = false">取 消</el-button>
        <el-button type="danger" @click="onConfirmComplement()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <pagination
      style="clear: both"
      :form="form"
      :total="total"
      @paginationPostOrderTaskList="postCodeGetpocessingdetails"
    />
    <el-dialog title="查看RFID流程" :visible.sync="dialogTableVisibleRFID" >
      <div class="rfidmode">
        <div>RFID: {{ rfid }}</div>
      </div>
      <el-timeline style="margin-top: 40px">
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </el-dialog>
  </div>
</template>

<script>
import {
  postCodeGetpocessingdetails,
  postCodeApplyabandoned,
  postCodePusetprocessingnumber,
  postCodeGetnumber,
} from "@/api";
import pagination from "@/components/pagination.vue";
export default {
  components: { pagination },
  data() {
    return {
      loading: false,
      dialogTableVisibleRFID: false,
      options: [
        {
          status: 0,
          title: "未打印",
        },
        {
          status: 1,
          title: "已打印",
        },
        {
          status: 11,
          title: "作废",
        },
      ],
      form: {
        status: "",
        number: "",
        id: "",
        page: 1,
        size: 10,
      },
      row: {},
      cancellation: {
        strnumber: "",
        endnumber: "",
      },
      complement: {
        num: "",
      },
      weidayin: "",
      yidanyin: "",
      yizuofei: "",
      kebushu: "",
      cancellationdialogVisible: false,
      complementVisible: false,
      tableData: [],
      total: 1,
      activities: [],
      rfid: "",
    };
  },
  created() {
    let form = this.form;
    let row = JSON.parse(this.$route.query.row);
    this.row = row;
    this.form.id = row.id;
    this.postCodeGetpocessingdetails(form);
  },
  activated() {
    console.log("this.$route.query.row",this.$route.query.row)
    if (this.$route.query.row) {
      let form = this.form;
      form.page = 1
      form.size = 10
      let row = JSON.parse(this.$route.query.row);
      this.row = row;
      this.form.id = row.id;
      this.postCodeGetpocessingdetails(form);
    }
  },
  methods: {
    // 查看
    onLook(rfid) {
      this.rfid = rfid;
      let obj = {
        number: rfid,
      };
      postCodeGetnumber(obj).then((res) => {
        console.log("rfid查询", res);
        let data = res.data;
        let arr = [];
        if (data.createtime) {
          let obj = {
            content: "生成",
            timestamp: data.createtime,
          };
          arr.push(obj);
        }
        if (data.printing_time) {
          let obj = {
            content: "打印",
            timestamp: data.printing_time,
          };
          arr.push(obj);
        }
        if (data.fa_time) {
          let obj = {
            content: "出厂",
            timestamp: data.fa_time,
          };
          arr.push(obj);
        }
        if (data.qc && data.qc.length) {
          data.qc.forEach((e) => {
            let obj = {
              content: `QC(${e.qc_user})已检`,
              timestamp: e.qc_time,
            };
            arr.push(obj);
          });
        }
        if (data.qt && data.qt.length) {
          data.qt.forEach((e) => {
            let obj = {
              content: `仓检(${e.qc_user})已检`,
              timestamp: e.qc_time,
            };
            arr.push(obj);
          });
        }
        if (data.ware_time) {
          let obj = {
            content: "入库",
            timestamp: data.ware_time,
          };
          arr.push(obj);
        }
        if (data.delivery_time) {
          let obj = {
            content: "出库",
            timestamp: data.delivery_time,
          };
          arr.push(obj);
        }
        this.activities = arr;
      });
      this.dialogTableVisibleRFID = true;
    },
    // 查询
    onSearch() {
      let form = this.form;
      form.page = 1
      this.postCodeGetpocessingdetails(form);
    },

    // 生成rfid
    onConfirmComplement() {
      let complement = this.complement;
      if (complement.num) {
        this.$confirm("确定生成RFID?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            complement.id = this.form.id;
            postCodePusetprocessingnumber(complement).then((res) => {
              let form = this.form;
              this.postCodeGetpocessingdetails(form);
              this.complementVisible = false;
              this.$message({
                type: "success",
                message: "已成功生成RFID!",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消生成RFID",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请输入生成数量",
        });
      }
    },
    // 作废确认
    onConfirm() {
      let cancellation = this.cancellation;
      if (cancellation.strnumber) {
        this.$confirm("此操作将作废该流水号, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            cancellation.id = this.form.id;
            postCodeApplyabandoned(cancellation).then((res) => {
              let form = this.form;
              this.postCodeGetpocessingdetails(form);
              this.cancellationdialogVisible = false;
              this.$message({
                type: "success",
                message: "请耐心等作废审批,请勿重复提交 !",
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消作废",
            });
          });
      } else {
        this.$message({
          type: "info",
          message: "请输入流水号",
        });
      }
    },
    onExport(row) {
      this.row = row;
      this.exportdialogVisible = true;
    },
    handleSelectionChange(val) {
      console.log("val-------------->", val);
      this.multipleSelection = val;
    },
    // 采购列表
    async postCodeGetpocessingdetails(data) {
      this.loading = true;
      this.form = data;
      postCodeGetpocessingdetails(data)
        .then((res) => {
          this.loading = false;
          console.log("采购列表", res);

          this.tableData = res.data;
          this.weidayin = res.weidayin;
          this.yidanyin = res.yidanyin;
          this.yizuofei = res.yizuofei;
          this.kebushu = res.kebushu;
          this.total = Number(res.total);
        })
        .catch((err) => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.datastatistics {
  display: flex;
  padding: 20px 0 0;
  > div {
    margin-right: 40px;
  }
}
.exportdialogVisible {
  > div:nth-child(1) {
    display: flex;
    > div {
      > span {
        font-weight: 600;
      }
    }
  }
  > div:nth-child(2) {
    margin: 20px 0;
    display: flex;
    > span {
      > span {
        font-weight: 600;
      }
    }
  }
  > div:nth-child(3) {
    display: flex;
    align-items: center;
    /deep/ .el-input {
      width: 200px;
      color: #409eff;
    }
  }
}
.cancellationdialogVisible {
  > div:not(:nth-last-child(1)) {
    display: flex;
    margin-top: 20px;
    > div {
      margin-right: 40px;
    }
  }
  > div:nth-last-child(1) {
    margin-top: 20px;
    display: flex;
    align-items: center;
    /deep/ .el-input {
      width: 200px;
    }
    > div:nth-child(3) {
      margin: 0 10px;
      width: 30px;
      height: 1px;
      background: #666;
    }
  }
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
.export {
  margin-top: 20px;
  display: flex;
  align-items: center;
  float: right;
  > div {
    margin-right: 20px;
    > span {
      color: #409eff;
      font-size: 18px;
      padding: 0 5px;
    }
  }
}
.WorkingSchedule {
  background: #ffff;
  padding: 20px;
  border-radius: 2px;
  @include boxShadow;
}
</style>
